<!--
/**
* Author: KSJ
* Date: 2022-07-28 16:06
* Desc: 选择场次
*/
-->
<template>
  <yy-page linear-bg custom-style="background:white">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <yy-navbar :border="false" title="选择场次" left-icon-color="#fff" title-color="#fff" :auto-back="true"></yy-navbar>
    <!-- #endif-->
    <view class="film-page">
      <map-guide v-if="cinemaInfo" :name="cinemaInfo.cinemaName" :latitude="cinemaInfo.latitude" :address="cinemaInfo.address" :longitude="cinemaInfo.longitude"> </map-guide>
      <view class="film-content">
        <zm-mescroll-empty type="schedule" v-if="filmList.length === 0"></zm-mescroll-empty>
        <view>
          <yn-gallery
            v-if="scrollList.length > 0"
            :galleryheight="160"
            bkstart="#fff"
            bkend="#fff"
            :imgviewwidth="82"
            :imgviewheight="110"
            :showbadge="false"
            :showdec="false"
            :images="scrollList"
            :toview="selectImgIndex"
            @clickimg="onclickimg"
          >
          </yn-gallery>
        </view>
        <view v-if="filmList.length > 0" class="bc-white">
          <view class="movie-title tc fb mb20" v-if="selectMovie && selectMovie.name">
            {{ selectMovie.name }}
          </view>
          <view class="movie-desc fc8 tc ell flex flex-c-m" v-if="selectMovie && selectMovie.dec && selectMovie.dec.length">
            <view class="pl20 pr20 desc-item" v-for="(item, indexS) in selectMovie.dec" :key="indexS"> {{ item }}</view>
          </view>
          <!-- 日期 -->

          <scroll-view :show-scrollbar="false" scroll-x class="flex film-date-scroll" :class="{ noData: !loading && filmPlan.length == 0 }">
            <u-tabs
              v-if="dateList.length > 0"
              :item-style="itemStyle"
              line-color="#3BC5D2"
              :active-style="activeStyle"
              @click="dateChange"
              :current="current"
              :list="dateList"
            ></u-tabs>
          </scroll-view>
          <select-cinema-skeleton v-if="loading"></select-cinema-skeleton>
          <yy-collapse :border="false" :value="openList" v-if="!loading && filmPlan.length > 0">
            <!--  -->
            <yy-collapse-item :key="i" :name="i" :disabled="item.otherPrice ? false : true" v-for="(item, i) in filmPlan" ext-class="bc-white movie-cell">
              <movie-time slot="title" :info="item" :checked="hasPlanKey(item.planKey)" @clickCell="clickCell" @clickTip="clickTip" @clickBuy="buyFilm(item)"></movie-time>

              <movie-discount
                v-if="item.otherPrice"
                :is-full="item.isFull"
                @clickBuy="
                  (key) => {
                    buyFilm(item, key)
                  }
                "
                :other-price="item.otherPrice"
              ></movie-discount>
            </yy-collapse-item>
          </yy-collapse>
          <!-- 没数据 -->
          <zm-mescroll-empty type="schedule" v-if="!loading && filmPlan.length == 0"></zm-mescroll-empty>
        </view>
      </view>
    </view>
    <tip-popup v-model="showPanel"></tip-popup>
  </yy-page>
</template>

<script>
  import tipPopup from './components/tipPopup.vue'
  import MovieDiscount from './components/MovieDiscount/index'
  // import ZmCollapse from '@/commons/ZmCollapse'
  import MovieTime from './components/MovieTime.vue'
  // import ZmCollapseItem from '@/commons/ZmCollapseItem'

  import ZmMescrollEmpty from '@/commons/ZmMescrollEmpty/index.vue'
  import ynGallery from '@/subPages/components/YnComponents/ynGallery.vue'
  import MapGuide from '@/subPages/components/MapGuide'
  import SelectCinemaSkeleton from './components/SelectCinemaSkeleton'
  // import { Encrypt } from '@/utils/encryption'
  import sharePage from '@/mixins/sharePage'
  export default {
    name: '',
    components: {
      MovieTime,
      // ZmCollapse,
      // ZmCollapseItem,
      MovieDiscount,
      ynGallery,
      tipPopup,
      MapGuide,
      ZmMescrollEmpty,
      SelectCinemaSkeleton
    },
    mixins: [sharePage],
    data() {
      return {
        activeStyle: { color: '#3BC5D2' },
        itemStyle: { 'font-size': '24rpx', height: '40px' },
        query: {
          cinemaId: '',
          filmCode: '',
          planDate: ''
        },
        selectMovie: {
          name: '',
          dec: []
        },
        current: 0,
        cinemaId: '',
        dateList: [],
        selectImgIndex: '0',
        scrollList: [],
        filmList: [], // 热门
        list: [], // 影院
        filmPlan: [],
        openList: [],
        active: [],
        filmCode: null,
        areaInfo: null,
        filmInfo: null,
        noScheduling: '',
        showPanel: false,
        loading: true,
        cinemaInfo: null // 影院信息
      }
    },
    computed: {},
    onLoad(options) {
      this.$auth.getBaseSet()
      this.query = options

      this.getHotFilmList()
      // this.cinemaPlanDate()
    },
    onShow() {
      this.areaInfo = this.$auth.getChooseAreaInfo()
      this.getCinemaDes()
    },
    methods: {
      getCinemaDes() {
        // 影院信息
        const data = { cinemaId: this.query.cinemaId }
        uni.$api.cinema.getCinemaDes(data).then((res) => {
          this.cinemaInfo = res
        })
      },
      getHotFilmList() {
        // 获取轮播数据
        const data = {
          cinemaId: this.query.cinemaId
        }
        uni.$api.film.getHotFilmList(data).then((res) => {
          console.log(res, '======')
          this.filmList = res
          if (!this.filmList.length) {
            this.noScheduling = true
            return
          }
          this.setimgs()
          setTimeout(() => {
            let noData = true
            for (let i = 0; i < this.filmList.length; i++) {
              const dec = []
              if (this.filmList[i].filmCode === this.query.filmCode) {
                this.filmList[i].language && dec.push(this.filmList[i].language)
                this.filmList[i].duration && dec.push(this.filmList[i].duration + '分钟')
                this.filmList[i].type && dec.push(this.filmList[i].type)

                this.selectMovie = {
                  name: this.filmList[i].filmName,
                  dec: dec
                }
                this.selectImgIndex = i
                noData = false
                break
              }
            }
            if (noData && this.filmList.length) {
              const film = this.filmList[0]
              const dec = []
              film.language && dec.push(film.language)
              film.duration && dec.push(film.duration + '分钟')
              film.type && dec.push(film.type)
              this.selectMovie = {
                name: film.filmName,
                dec: dec
              }
              console.log('selectMovie', film)
              this.query.filmCode = film.filmCode
              this.selectImgIndex = 0
            }
            //获取影片信息后请求日期
            this.cinemaPlanDate()
          }, 150)
        })
      },
      cinemaPlanDate() {
        // 放映日期
        if (!this.query.fromHome) {
          const data = {
            cinemaId: this.query.cinemaId,
            filmCode: this.query.filmCode || this.filmList[0].filmCode
          }
          this.dateList = []
          uni.$api.plan.cinemaPlanDateTag(data).then((tags) => {
            const list = Object.keys(tags)
            const listHasTag = []
            list.forEach((item) => {
              listHasTag.push({
                hasTag: tags[item].tagList && tags[item].tagList.length > 0
              })
            })
            console.log('456', listHasTag)
            uni.$api.plan.cinemaPlanDate(data).then((res) => {
              this.dateList = res.map((item, i) => {
                console.log('tags[i]', tags[i])
                return {
                  value: item,
                  name: this.$utils.getDateWeek(item),
                  badge: listHasTag[i].hasTag ? { value: '特殊场' } : null
                }
              })

              if (!this.dateList.length) {
                this.noScheduling = true
                return
              }
              this.noScheduling = false
              // 设置默认 排期时间 默认取传进来的时间
              let planDate = this.query.planDate || ''

              const index = res.indexOf(planDate)
              this.current = index !== -1 ? index : 0
              planDate = index !== -1 ? planDate : this.dateList[0].value

              this.getCinemaPlan(planDate)
            })
          })
        }
      },
      dateChange(e) {
        this.getCinemaPlan(e.value)
      },

      getCinemaPlan(date = '') {
        // 获取影院影片排期
        const data = {
          cinemaId: this.query.cinemaId,
          filmCode: this.query.filmCode,
          planDate: date || this.query.planDate
        }
        this.active = []
        this.openList = []
        this.filmPlan = []
        this.loading = true
        uni.$api.plan.cinemaPlan(data).then((res) => {
          this.filmPlan = res
          // this.$nextTick(() => {
          this.filmPlan.map((item, i) => {
            if (item.otherPrice) {
              this.openList.push(i)
            }
          })
          // setTimeout(() => {

          // }, 500);
          this.loading = false
          // })
          this.active = this.filmPlan.filter((i) => i.otherPrice).map((i) => i.planKey)
        })
      },
      buyFilm(item, key) {
        //  判断是否登录
        if (this.$auth.getIslogin()) {
          const minUnitPrice = item.otherLowestPrice // 用于选座回显最低价格
          const query = {
            cinemaId: this.query.cinemaId,
            planKey: item.planKey,
            minUnitPrice,
            discountType: key || '' // discountRule discountPackage
          }
          this.$auth.setChooseFilmName(this.cinemaInfo.cinemaName)
          this.$tools.navigateTo('/pagesOrder/chooseSet/index', query)
          // this.$tools.navigateTo(
          //   `/pagesOrder/chooseSet/index?query=${this.$utils.encode(query)}`
          // )
        } else {
          this.$tools.navigateTo(`/pages/login/index`)
        }
      },
      clickCell(item) {
        // 控制箭头方向
        if (!item.otherPrice) {
          return
        }

        if (this.hasPlanKey(item.planKey)) {
          this.active = this.active.filter((i) => i !== item.planKey)
        } else {
          this.active.push(item.planKey)
        }
      },
      hasPlanKey(key) {
        return this.active.includes(key)
      },
      onclickimg(imgviewobj) {
        console.log('imgviewobj==', imgviewobj, imgviewobj.index)
        // 点击轮播
        if (imgviewobj.index !== undefined) {
          const dec = []
          const movie = this.filmList[imgviewobj.index]
          movie.language && dec.push(movie.language)
          movie.duration && dec.push(movie.duration + '分钟')
          movie.type && dec.push(movie.type)
          this.selectMovie = {
            name: movie.filmName,
            dec: dec
          }
          if (this.query.filmCode === movie.filmCode) {
            return
          }
          this.query.filmCode = movie.filmCode
          this.cinemaPlanDate()
        }
      },
      setimgs() {
        // 初始化轮播
        var imgs = []
        for (const i in this.filmList) {
          const imgobj = {
            flag: i,
            show: this.filmList[i].tagList && this.filmList[i].tagList.length > 0,
            url: '' //图源
          }
          imgobj.url = this.filmList[i].cover
          imgs.push(imgobj)
        }
        this.scrollList = imgs
        console.log('scrollList', this.scrollList)
      },
      clickTip() {
        this.showPanel = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .pageHidden {
    overflow: hidden;
  }
  .film-page {
    width: 100%;
    overflow-x: hidden;
  }
  .film-date-scroll {
    width: 100%;
    height: 40px;
    overflow-x: hidden;
    background: #fff;
    padding: 0 30rpx;
    white-space: nowrap;
    border-top: solid 1rpx #eee;
  }
  .noData {
    border-bottom: solid 1rpx #eee;
  }
  .film-content {
    width: 100%;
    overflow-x: hidden;
    min-height: calc(100vh - 330rpx);
    padding-bottom: 34rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    box-sizing: border-box;
    .movieList {
      width: 100%;
      overflow-x: hidden;
    }
    .movie-title {
      font-size: 36rpx;
    }
    .movie-desc {
      font-size: 24rpx;
      width: 544rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32rpx;
      .desc-item {
        position: relative;
      }
      .desc-item:not(:last-child)::after {
        content: '';
        width: 1rpx;
        position: absolute;
        height: 24rpx;
        background: #888;
        right: 0;
        top: 50%;
        margin-top: -12rpx;
      }
    }
  }
</style>
